// 获取tbody 标签
const tb = document.querySelector('tbody')

async function getList () {
  // 每次执行数据更新html 都重新开始累加
  let html = ''
  // 获取学员成绩数据
  const result = await axios({
    url: '/score/list',
  })

  const arr = result.data.data
  // 遍历对象里面数据渲染到页面
  for (const key in arr) {
    // 解构对象里面数据
    const { name, score } = arr[key]
    // 把渲染数据累加在html 里面
    html += `
      <tr>
         <th scope="row">${key}</th>
         <td>${name}</td>
         <td class="score" data-stu_id="${key}" data-batch="${1}">${score[0]}</td>
         <td class="score" data-stu_id="${key}" data-batch="${2}">${score[1]}</td>
         <td class="score" data-stu_id="${key}" data-batch="${3}">${score[2]}</td>
         <td class="score" data-stu_id="${key}" data-batch="${4}">${score[3]}</td>
         <td class="score" data-stu_id="${key}" data-batch="${5}">${score[4]}</td>
      </tr>`
  }
  // 把数据渲染到 tbody 里面
  tb.innerHTML = html
}
getList()

// 双击事件
tb.addEventListener('dblclick', function (e) {

  if (e.target.classList.contains('score')) {
    // 创建input 节点
    const input = document.createElement("input")
    // 把input 框变成文本框
    input.type = 'text'
    // 双击后之前的数据直接渲染到input 框里面
    input.value = e.target.innerText
    // 在td 里面插入input 框
    e.target.appendChild(input)
    // 双击后input 框自动获取焦点
    input.focus()


    // 给input 框添加失去焦点事件
    input.addEventListener('blur', postList)
    // 给input 框添加点击事件
    input.addEventListener('keyup', function (e) {
      // 判断是否按下 回车键
      if (e.key === 'Enter') {
        // 移除input 失去焦点事件        
        input.removeEventListener('blur', postList)
        // 上传新数据
        postList()
      }
    })

    // 修改数据
    async function postList () {
      // 解构出stu_id, batch 数据
      const { stu_id, batch } = e.target.dataset
      const score = input.value
      // 上传 axios 数据
      const result = await axios({
        url: '/score/entry',
        method: 'post',
        data: {
          stu_id,
          batch,
          score
        }
      })

      if (result.data.code === 0) {
        // 更新表单事件
        getList()
        // 返回成功弹窗
        toastr.success(result.data.message, '成功')
      }
    }
  }
})
